Um design system reúne, num só lugar, as decisões visuais reutilizáveis do produto — cores, tipografia, espaçamentos e componentes. Ele garante que cada tela do Minuto Premiado seja montada com as mesmas peças, mantendo consistência, agilidade e uma identidade coerente em todo o app.
01 — Cores
Paleta
Bases verde-petróleo escuras criam profundidade; os acentos aparecem com parcimônia para marcar ação, vitória e prêmio.
Bases & superfícies
Base
#0A1310
Superfície 1
#111D17
Superfície 2
#16271E
Superfície 3
#1B3024
Borda
#233A2C
Acentos
Verde-limão
Principal · ação & vitória
#C2FF47
Dourado
Premium · jackpot & VIP
#F2C868
Ciano digital
Velocidade · dados & links
#5BF0E0
Semânticos & texto
Acertou
#3CE08A
Errou
#FF5A5A
Atenção
#FFB454
Texto alto
#EAF3EC
Texto médio
#9DB1A4
Texto baixo
#647467
Degradês
Velocidade
limão → ciano
Premium
dourado → limão
Risco
erro → atenção
02 — Tipografia
Tipos
Três famílias com papéis bem definidos. Os números são protagonistas — sempre tabulares.
Aa
Space Grotesk
Display, títulos e cronômetro
Aa
Manrope
Interface, corpo e rótulos
Aa
JetBrains Mono
Cronômetro, placar, IDs e tokens
DisplayGrotesk 700 · 52px
Título de seçãoGrotesk 700 · 32px
SubtítuloGrotesk 600 · 21px
Corpo grande — leitura confortável em telas pequenas.Manrope 400 · 18px
Corpo padrão para textos de apoio e descrições.Manrope 400 · 15px
Micro rótulo / tickerMono 500 · 12px
Tratamento de números — tabular, glow no destaque
0:47
Tempo da partida
8 / 10
Acertos
+R$ 22,50
Prêmio recebido
03 — Espaço & forma
Espaçamento & raios
Escala base-4. Cantos generosos reforçam o toque amigável de um app de jogo.
Escala de espaçamento
4
8
12
16
24
32
48
64
Raios de canto
sm · 8px
md · 12px
lg · 16px
xl · 24px
full · 999px (pílulas & chips)
04 — Profundidade
Elevação & glow
No escuro, a sombra cria camadas e o brilho (glow) sinaliza energia — reservado para ação e vitória.
Plano
só borda
Elevado
0 8 24 / 45%
Flutuante
0 18 48 / 55%
Glow vitória
limão · 30%
Glow premium
dourado · 28%
05 — Componentes
Botões
A resposta da partida são dois botões grandes — Verdadeiro / Falso. A ação principal é sempre limão e cheia. Toque mínimo de 48px.
Resposta · Verdadeiro / Falso
✓ Acertou
✕ Errou
Ação principal & secundário
Tamanhos & estados
06 — Componentes
Conta, PIX & formulários
Conta, chave PIX e o código copia-e-cola — os campos que sustentam cadastro, ingresso e premiação.
Chave PIX
CPFE-mailTelefoneAleatória
123.456.789-00
Maria Silva
Conta — e-mail & senha
seu@email.com
maria@email.com
••••••
E-mail ou senha inválidos.
PIX copia-e-cola
00020126360014br.gov.bcb.pix…
Expira em04:38
Som da partida
efeitos sonoros
07 — Componentes
Cards
Cobrança PIX, ranking da partida e estatísticas — os blocos que estruturam o app.
Ingresso da partida
AGUARDANDO
R$ 5,00
QR CODE
EXPIRA EM04:38
RANKING10 jogadores
1ºLucas R.911.2s
2ºBianca M.913.8s
3ºVocê715.1s
4ºCaio T.618.0s
5ºDuda L.516.4s
Suas estatísticas
48
Partidas
12
Vitórias
25%
Winrate
R$ 270
Total ganho
Último prêmio
R$ 22,50
PAGO
08 — Componentes
Chips & badges
Feedback de resposta, posição no ranking e status do prêmio comunicam o estado num relance.
Resposta & posição
✓ Acertou✕ Errou
1º LUGAR2º3ºVOCÊ
Status do prêmio (PIX)
AGUARDANDO PIXPROCESSANDOPAGOCANCELADO
Estado da partida
EM PARTIDANA FILAENCERRADAREEMBOLSADO
09 — Navegação & ícones
Navegação mobile
Barra superior com a marca e o prêmio; barra inferior fixa com 3 destinos. Ícones de traço, 1.75px, cantos arredondados.
Minuto Premiado
Prêmio estimado
R$ 22,50
TEMPO0:47
A água ferve a 100°C ao nível do mar.
Início
Histórico
Perfil
Conjunto de ícones · traço 1.75
Linha consistente, cantos arredondados, mesmo peso visual. O dourado marca apenas ícones de prêmio.
Interface criada pela Phurshell